<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-nearbyStore-detail">
        <div class="img-box">
          <img mode="widthFix" class="img" :src="detail.thumb" alt="">
        </div>

      <h1 class="h1">{{detail.nearby_name}}</h1>

      <a class="position">
        <div class="item1">
          <p class="p1"><i class="gaIcon icon-map-marker"></i>{{detail.address}}</p>
          <p class="p2"><i class="gaIcon icon-phone"></i>电话:{{detail.telephone}}</p>
          <p class="p3"><i class="gaIcon icon-clock-o"></i>{{detail.business_days}}  {{detail.business_hours}}</p>
          <!-- <p class="p4">时代天街</p>
 -->        </div>
        <div class="item2" @click="showMap">
          <p>
            <i class="gaIcon icon-map-marker"></i>
          </p>
          <p>定位导航</p>
        </div>
      </a>

      <!-- <h1 class="h1">本店热门活动</h1>
      <a class="hot-box">
        <img mode="widthFix" class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/ads1.jpg" alt="">
      </a> -->

      <h1 class="h1">本店热销产品</h1>
      <div class="tabs clearfix">
        <a class="item" :class="{'active':qwerqwre===0}" key="0" v-on:click="tabs(0)">普通商品</a>
        <a class="item" :class="{'active':qwerqwre===index+1}" v-for="item in detail.container" :key="index" v-on:click="tabs(index+1)">货柜{{item.container_sn}}</a>
      </div>
      <view class='shop' :class="{'model_none':qwerqwre!==0}">
        <view class='shop_con' v-for="item in detail.goods" :key="index" v-if="item.goods_type == 1">
          <view class="goodsimg">
            <image :src="item.goods_thumb"></image>
          </view>
          <view class="con">
            <view class="con_top">
              <text>{{item.goods_name}}</text>
              <text class="ct_text">已售{{item.goods_sale}}件</text>
            </view>
            <view class="con_bottom">
              <text class="price">￥{{item.goods_price}}</text>
              <view class="number">
                 <image bindtap='reduce' :class="{'model_none':item.changenum == 0}" src='/static/images/shop/rud.png' v-on:click="reduce(item.id)"></image>
                <text :class="{'model_none':item.changenum == 0}">{{item.changenum}}</text>
                <image bindtap='add' src='/static/images/shop/add.png' v-on:click="raise(item.id)"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class='shop' :class="{'model_none':qwerqwre!==con_index+1}" v-for="(container,con_index) in detail.container" :key="con_index">
        <view class='shop_con' v-for="(item,index) in detail.goods" :key="index" v-if="item.goods_type == 2 && item.conta_id == container.id">
          <view class="goodsimg">
            <image :src="item.goods_thumb"></image>
          </view>
          <view class="con">
            <view class="con_top">
              <text>{{item.goods_name}}</text>
              <text class="ct_text">已售{{item.goods_sale}}件</text>
            </view>
            <view class="con_bottom">
              <text class="price">￥{{item.goods_price}}</text>
              <view class="number">
                 <image bindtap='reduce' :class="{'model_none':item.changenum == 0}" src='/static/images/shop/rud.png' v-on:click="reduce(item.id)"></image>
                <text :class="{'model_none':item.changenum == 0}">{{item.changenum}}</text>
                <image bindtap='add' src='/static/images/shop/add.png' v-on:click="raise(item.id)"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--底部购物清单-->
<view style='height:90rpx;'></view>
<view class='footer' v-if="!isSet">
  <view class='f_lf'>
    <view>
      <image src='/static/images/shop/care_hui.png'></image>
    </view>
  </view>
  <view class='f_cen'>
    <text>未选购商品</text>
    <!-- <text>另需配送费2.5元</text> -->
  </view>
  <view class='f_rg'>
    <text>立即支付</text>
  </view>
</view>

<view class='footer' style='z-index:5;' wx:else>
  <view class='f_lf lf_bac' v-on:click="show_bool = !show_bool">
    <view class='care'>
      <image src='/static/images/shop/care_bai.png'></image>
    </view>
    <text class='amount'>{{changenum}}</text>
  </view>
  <view class='f_cen'>
    <text class='cen_price'>￥{{changeprice}}</text>
  </view>
  <view class='f_rg' :style="{'background':'#ff3a35'}">
    <text v-on:click="pay">立即支付</text>
  </view>
</view>

<!--购物弹出层-->
<view class= 'model' v-show="show_bool">
  <view class='m_box'>
    <!-- <view class='m_title'>还差5.8元起送</view> -->
    <view class='select_goods'>
      <view>已选商品</view>
      <view class='m_remove' v-on:click="_empty">
        <image src='/static/images/shop/remove.png'></image>
        <text>清空</text>
      </view>
    </view>

    <view class='goods_list' v-for="item in detail.goods" :key="index" v-if="item.changenum > 0">
      <text>{{item.goods_name}}</text>
      <!-- <text>薰衣草</text> -->
      <view class="gl_number">
        <text class='gl_price'>￥{{item.goods_price}}</text>
        <image src='/static/images/shop/rud.png' v-on:click="reduce(item.id)"></image>
        <text>{{item.changenum}}</text>
        <image src='/static/images/shop/add.png' v-on:click="raise(item.id)"></image>
      </view>
    </view>
  </view>
</view>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      detail: {},
      qwerqwre:0,
      show_bool: false,
      isSet: false,
      changenum:0,
      changeprice: 0
    }
  },

  created () {

  },

  methods:{
    /*加载数据*/
    async load () {
       this.$_util.ajax.get('https://guo-a.com/mapi/nearby/detail?id='+this.$root.$mp.query.id).then((res) => {
        //this.$_util.ajax.get('https://guo-a.com/mapi/nearby/detail?id=2').then((res) => {
        console.log(res)
          if(res.code === 200){
            this.detail = res.data
          }
      })
    },
    /*显示地图*/
    showMap () {
      let latitude = parseFloat(this.detail.latitude)
      let longitude = parseFloat(this.detail.longitude)
      wx.openLocation({
        latitude: latitude,
        longitude: longitude,
        scale: 28
      })
    },
    /*tab切换*/
    tabs (item){
      this.qwerqwre = item
    },
    /*添加商品*/
    raise (id){
      this.detail.goods.forEach(item => {
        if(item.id === id){
          if(item.goods_stock == item.changenum){
            wx.showToast({
              title:'库存不足',
              icon: 'none'
            })
          }else{
            item.changenum ++
          }

        }
      })
      this.check()
    },
    /*减少商品*/
    reduce (id){
      this.detail.goods.forEach(item => {
        if(item.id === id){
          item.changenum --
        }
      })
      this.check()
    },
    /*计算数量和金额*/
    check(){
      var num = 0
      var price = 0
      this.detail.goods.forEach(item => {

        num+=item.changenum
        price += item.changenum * item.goods_price
      })
      this.changenum = num
      this.changeprice = price.toFixed(2)
      if(num>0){
        this.isSet = true
      }else{
        this.isSet = false
        this.show_bool = false
      }
      console.log(num)
    },
    /*清空购物车*/
    _empty () {
      this.detail.goods.forEach(item => {
        item.changenum = 0
      })
      this.changenum = 0
      this.changeprice = 0
      this.isSet = false
      this.show_bool = false
    },
    /*准备结算*/
    pay () {
      var data = []
      this.detail.goods.forEach(item => {
        if(item.changenum>0){
           data.push({
              id: item.id,
              num: item.changenum
           })
        }
      })
      data = encodeURIComponent(JSON.stringify(data))
      wx.navigateTo({
          url: '/pages/storeorder/main?data=' + data
      })
      console.log(data)
    }
  },
  onShow () {
    this.load()
    this.changenum = 0
    this.changeprice = 0
    this.isSet = false
    this.show_bool = false
  }
}
</script>
